<template>
  <nav class="navbar nav-default">
    <div class="container-fluid">
      <div class="navbar-header def-header">
        <a class="navbar-brand active" href="http://www.linrongtu.top">林荣途的个人网站</a>
      </div>
      <div class="def-main">
        <ul class="nav nav-tabs">
          <li><router-link to="/project" class="project">我的项目</router-link></li>
          <li><router-link to="/experience" class="nav-experience" @click="showNav">心得</router-link></li>
          <li><router-link to="/status" class="status">状态</router-link></li>
          <li><router-link to="/myComponents" class="my-components">我的组件</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
</template>
<script>
export default {
  name: 'navbar',
  methods: {
    showNav () {
      this.isShowNav = true
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.navbar
  padding: 0
  margin: 0
  background: #121212
  .container-fluid
    display: flex
    .def-header
      flex: 9
      .navbar-brand
        flex: 2
        font: normal 18px/24px
        color: #42b983
      .navbar-brand:hover
        text-decoration: underline
    .def-main
      font-size: 14px
      ul
        border: 0
      .nav-tabs
        li
          .project
            color: #42b983
          .nav-experience
            color: #42b983
          .status
            color: #42b983
</style>
